<script setup>
import { ref, reactive } from "vue";
const avatarUrl = ref("https://picsum.photos/200/200");
const dialogFormVisible = ref(false);
const formLabelWidth = "100px";
import { ElMessage } from 'element-plus'
import request from '@/utils/axios'

const form = reactive({
  password: "",
  newPw: "",
  newPw2: "",
});

const handleClick = (command) => {
  switch (command) {
    case "changePw":
      dialogFormVisible.value = true;
      break;
    case "logout":
      console.log("退出登录逻辑");
      break;
  }
};

const formRef=ref(null)
const handleConfrim = async () => {
  if (!formRef.value) return
  try {
    await formRef.value.validate()
    
    const userId = localStorage.getItem('userId')
    if (!userId) {
      ElMessage.error('用户未登录')
      return
    }

    const response = await request.post('/api/change-password', {
      userId: parseInt(userId),
      oldPassword: form.password,
      newPassword: form.newPw
    })

    if (response.data.code === 200) {
      dialogFormVisible.value = false
      formRef.value.resetFields()
      ElMessage.success('密码修改成功')
    } else {
      ElMessage.error(response.data.message || '密码修改失败')
    }
  } catch (error) {
    if (error.response) {
      ElMessage.error(error.response.data?.message || '密码修改失败')
    } else {
      ElMessage.error('网络错误')
    }
  }
}

const rules = {
  password: [
    { required: true, message: "请输入旧密码", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度在 6 到 20 个字符", trigger: "blur" },
  ],
  newPw: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度在 6 到 20 个字符", trigger: "blur" },
    {
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/,
      message: "密码需包含大小写字母和数字",
      trigger: "blur",
    },
  ],
  newPw2: [
    { required: true, message: "请确认新密码", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value !== form.newPw) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};
</script>

<template>
  <div class="header">
    <div class="title">AI ViviPlay</div>
    <div class="user">
      <span>scq123456</span>
      <img :src="avatarUrl" alt="用户头像" class="avatar" />
      <div class="dropdown">
        <el-dropdown @command="handleClick">
          <span class="el-dropdown-link">
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="changePw">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogFormVisible" title="修改密码" width="500">
    <el-form :model="form" :rules="rules" ref="formRef">
      <el-form-item
        label="旧密码"
        prop="password"
        :label-width="formLabelWidth"
      >
        <el-input
          v-model="form.password"
          autocomplete="off"
          type="password"
          show-password
        />
      </el-form-item>
      <el-form-item label="新密码" prop="newPw" :label-width="formLabelWidth">
        <el-input
          v-model="form.newPw"
          autocomplete="off"
          type="password"
          show-password
        />
      </el-form-item>
      <el-form-item
        label="确认新密码"
        prop="newPw2"
        :label-width="formLabelWidth"
      >
        <el-input
          v-model="form.newPw2"
          autocomplete="off"
          type="password"
          show-password
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfrim">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.title {
  font-family: "LiSu", "隶书", serif;
  font-size: 25px;
  font-weight: 500;
  color: black;
  letter-spacing: 1px;
}
.user {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
}
.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #fff;
}
.dropdown {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>